<script setup>
import { ref, reactive, toRaw, shallowRef } from 'vue'
import Upload2 from '../../components/Xf/Upload2.vue';
import { QuillEditor } from '@vueup/vue-quill'
import MapContainer from '../../components/Xf/MapContainer.vue';
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { addComApi, getComApi, editComApi } from '../../api/commit'
import { ElMessage } from "element-plus";
const isShow = ref(false)
const activeName = ref('基础信息')
const defaultState = {
  address: '',
  area: '',
  developer: '',
  estate: '',
  greening_rate: '',
  introduction: '',
  name: '',
  position: '',
  thumb: '',
  total_building: null,
  total_owner: null,
  id: null
}
const formRules = {
  name: [{ required: true, message: "请选择", trigger: "blur" }],
  address: [{ required: true, message: "请选择", trigger: "blur" }],
  area: [{ required: true, message: "请选择", trigger: "blur" }],
  developer: [{ required: true, message: "请选择", trigger: "blur" }],
  estate: [{ required: true, message: "请选择", trigger: "blur" }],
  greening_rate: [{ required: true, message: "请选择", trigger: "blur" }],
  total_building: [{ required: true, message: "请选择", trigger: "blur" }],
  total_owner: [{ required: true, message: "请选择", trigger: "blur" }],
  position: [{ required: true, message: "请选择", trigger: "blur" }],
};
// 表单ref引用
const formRef = ref();
const quil = ref()
const isOpen = ref(false)
//改变地图
const changMap = (val) => {
  console.log(val);
  formData.position = val;
};
const emit = defineEmits(["updateList"]);
const replyData = async (id) => {
  let res = await getComApi(id)
  Object.assign(formData, res.data)
  isShow.value = true
}
const formData = reactive({ ...defaultState });
const onSubmit = async () => {
  const data = toRaw(formData);
  data.total_building = data.total_building * 1
  data.total_owner = data.total_owner * 1
  // await addComApi(data)
  await formRef.value.validate();
  formData.id ? await editComApi(data) : await addComApi(data)
  ElMessage.success("操作成功");
  emit("updateList");
  isShow.value = false;
}
const closeHandler = () => {
  formRef.value.resetFields()
  // 移除校验
  // 重置表单数据
  Object.assign(formData, { ...defaultState })
  // editor.value.txt.clear()
  // quil.value.setHTML('');
  // console.log(editor);
};
const title = computed(() => {
  return formData.id ? '修改' : '新增'
})
defineExpose({
  replyData,
  isShow
})
</script>
<template>
  <el-drawer v-model="isShow" :show-close="false" @close="closeHandler" size="50%">
    <template #title>
      <div class="flex">
        <div>{{ title }}</div>
        <div style="margin-top: 10px">
          <span class="close" @click="isShow = false" style="margin-right: 20px">X</span>
          <!-- <span>{{ title }}</span> -->
        </div>
      </div>
    </template>
    <el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px" :inline="false" label-position="top"
      :title="title">
      <el-tabs style="margin-top: -30px" v-model="activeName" class="demo-tabs">
        <el-tab-pane label="基础信息" name="基础信息">
          <el-row>
            <el-col :span="10">
              <el-form-item label="小区名称" prop="name">
                <el-input placeholder="请输入" v-model="formData.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="2">
              <el-form-item label="坐落地址" prop="address">
                <el-input placeholder="请输入" v-model="formData.address"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 3-->
          <el-row>
            <el-col :span="10">
              <el-form-item label="占地面积" prop="area">
                <el-input placeholder="请输入" v-model="formData.area"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="2">
              <el-form-item label="开发商名称" prop="developer">
                <el-input placeholder="请输入" v-model="formData.developer"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 4 -->
          <el-row>
            <el-col :span="10">
              <el-form-item label="物业公司名称" prop="estate">
                <el-input placeholder="请输入" v-model="formData.estate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="2">
              <el-form-item label="绿化率" prop="greening_rate">
                <el-input placeholder="请输入" v-model="formData.greening_rate"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 5 -->
          <el-row>
            <el-col :span="10">
              <el-form-item label="总栋数" prop="total_building">
                <el-input type="number" v-model="formData.total_building" :min="0"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="2">
              <el-form-item label="总户数" prop="total_owner">
                <el-input type="number" v-model="formData.total_owner" :min="0"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="详情信息" name="详情信息">
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="小区图片">
                <!-- <label>小区图片</label> -->
                <br />
                <Upload2 v-model="formData.thumb" :type="'community'"></Upload2>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item size="normal" label="经纬度" prop="position">
                <!-- <label>经纬度</label> -->
                <el-row type="flex" justify="center">
                  <el-col :span="16" :offset="0">
                    <el-input placeholder="" size="normal" v-model="formData.position"></el-input>
                  </el-col>
                  <el-col :span="8" :offset="0">
                    <el-button type="primary" size="default" @click="isOpen = true">点击获取</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="introduction" class="quill">
            <div style="width: 80%; height: 80%">
              <QuillEditor contentType="html" v-model:content="formData.introduction" ref="quil "></QuillEditor>
            </div>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div style="margin-left: 80%">
      <el-button type="primary" @click="onSubmit"> 确定 </el-button>
      <el-button @click="isShow = false"> 取消 </el-button>
    </div>
  </el-drawer>
  <!-- 弹窗 -->
  <el-dialog v-model="isOpen" width="70%" title="获取经纬度" append-to-body>
    <MapContainer @changePosition="changMap"></MapContainer>
    <template #footer> </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>